attr（）

作用：获取或者设置属性节点的值

  • 传一个参数：获取这个属性节点的值
  • 传两个参数：设置这个属性节点的值
PS：

获取： 无论找到多少个元素，都只返回第一个元素指定的属性节点的值。
设置： 找到多少个，设置多少个。没找到，就自动新增。

removeAttr（）

作用：删除属性节点
会删除所有找到元素指定的属性节点
删除多个属性节点，空格隔开

示例代码：
$("span").attr("class");
$("span").attr("class", "box");
$("span").removeAttr("class name");

prop

与attr方法一致

removeProp

与removeProp方法一致

PS:

  • prop不仅操作属性，还能操作属性节点
  • 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

为什么呢？
示例：

console.log($("input").prop("checked")); 
// true / false
console.log($("input").attr("checked")); 
// checked / undefined
练习：切换图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-attr和prop方法练习</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function () {
                var input = document.getElementsByTagName("input")[0];
                var text = input.value;
                $("img").attr("src", text);
                // $("images").prop("src", text);
            }
        });
    </script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>